<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-24 16:01:59
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-24 16:43:34
 * @Description: 
-->
<template>
  <div class="content-box" ref="mainRef">
    <el-card shadow="hover" v-if="res.status">
      <template #header>
        <h1 class="header">{{ noticeDetail.title }}</h1>
        <p class="time">
          <el-icon><Calendar /></el-icon>
          {{ noticeDetail.create_time }}
        </p>
      </template>
      <el-image class="main_photo" :src="noticeDetail.main_photo" />
      <div v-html="noticeDetail.content" class="text-content"></div>
    </el-card>

    <div class="fixed-box">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="返回"
        placement="left"
      >
        <el-button
          @click="router.go(-1)"
          type="warning"
          circle
          icon="Back"
          size="large"
        ></el-button>
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="返回顶部"
        placement="left"
      >
        <el-button
          @click="backTop"
          type="primary"
          circle
          icon="Top"
          size="large"
        ></el-button>
      </el-tooltip>
    </div>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { notice, comment } from "@/api";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
console.log();
const route = useRoute();
const router = useRouter();

const id = route.params.id;
const res = await notice.detail({ id });
const noticeDetail = res.data;

const backTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
</script>

<style  scoped>
@media only screen and (max-width: 768px) {
  .content {
    width: 100%;
  }
}
.content-box{
    width: 100%;
}
.content-box .el-card{
    width: 100%;
}
.header {
  font-size: 40px;
}
.main_photo {
  width: 100%;
}
.time {
  color: var(--el-color-info);
}

.text-content {
  font-family: "Courier New", Courier, monospace;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
}
.text-content >>> p {
  margin: 20px 0 !important;
  line-height: 40px !important;
}
.text-content >>> h1,
.text-content >>> h2,
.text-content >>> h3,
.text-content >>> h4,
.text-content >>> h5,
.text-content >>> h6 {
  margin: 30px 0 10px 0;
  font-weight: 900;
}

.fixed-box {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fixed-box .el-button {
  margin-left: 0;
}
.fixed-box .box-item {
  width: 110px;
  margin-top: 10px;
}
.comment-box h2 {
  margin-bottom: 20px;
}
.comment {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px var(--el-color-info-light-7) dashed;
}
.comment .name {
  /* line-height: 40px; */
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.comment .text {
  flex: 1;
}
.comment .time {
  color: var(--el-color-info);
  margin-left: 20px;
}
.comment .content {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--el-text-color-regular);
  margin-bottom: 5px;
}
.comment .reply-box {
  margin-top: 10px;
  overflow: hidden;
  /* animation: reply-box .3s ease-out; */
  /* animation-fill-mode: forwards; */
}
@keyframes reply-box {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}
</style>
